<template>
  <div class="root">
    <el-menu
      default-active="1"
      width="250px"
      @open="handleOpen"
      @close="handleClose"
      @select="clickItem"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>体育用品</span>
        </template>
        <el-menu-item index="home1">器材统计</el-menu-item>
        <el-menu-item index="home2">场所统计</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          图书相关
        </template>
        <el-menu-item index="books">图书信息</el-menu-item>
        <el-menu-item index="userBook">使用者</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><document /></el-icon>
          <span>统计</span>
        </template>
        <el-menu-item index="statistics1">宿舍统计</el-menu-item>
        <el-menu-item index="statistics2">学生统计</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
let $router = useRouter();
const clickItem = (key, keyPath) => {
  console.log(key, keyPath);
  $router.push(key);
};
</script>

<style lang="scss" scoped>
.root {
  height: calc(100vh - 90px);
  width: 250px;
  .el-menu {
    height: 100%;
    width: 250px;
  }
}
</style>
